<!-- 动态详情 gpd 2023年4月18日 08点51分 -->
<template>
	<view class="TrendDetails">
		<view class="TrendDetails_head" >
			<img :src='userSelectTrend.avatarUrl' alt="" style="border-radius: 100%;width: 50px;height: 50px;float: left;">
			<p style="float: left;font-size: 14px;font-weight: bold;margin-left: 4%;margin-top: 2%;">{{userSelectTrend.userName}}</p>
			<p style="float: left;font-size: 14px;font-weight: bold;margin-left: 4%;margin-top: 2%;">{{userSelectTrend.createTime|formatDate('yyyy-MM-dd')}}</p>
		</view>
		 <swiper  indicator-dots="true"  :autoplay="false" circular="true"  >
			<swiper-item v-for="(it,index) in userSelectTrend.pictureGroup" :key="index" @change="e => currentNum = e.current">
			  <image mode="widthFix"  :src='`http://101.43.223.224:8765/image/getImageById?id=${it-0}`'></image>
			</swiper-item>
			<swiper-item>
				<video :id="userSelectTrend.videoGroup" v-if="userSelectTrend.videoGroup"  :src='`http://101.43.223.224:8765/image/getVideoById?id=${userSelectTrend.videoGroup-0}`'></video>
			</swiper-item>
		</swiper>
		<!-- 动态内容 -->  
		<view class="TrendDetails_body">
			<p style="font-size: 14px;font-weight: bold;">{{userSelectTrend.trendTitle}}</p>
			<p style="font-size: 14px;font-weight: bold;margin-top: 6%;">{{userSelectTrend.trendContent}}</p>
			<view class="TrendDetails_icon">
				<view style="width:30px;float: left;margin-top: 6%;margin-left: 4%;">
					<u-icon v-if="userSelectTrend.thumbFlag == 0" @click="ThumbsUpState(userSelectTrend)" name="heart" style="float: left;" size="30"></u-icon>
					<u-icon v-if="userSelectTrend.thumbFlag == 1" @click="noThumbsUpState(userSelectTrend)" name="heart-fill" style="float: left;" size="30"></u-icon>
				</view>
				<span style="color: #B4B2B5;font-size: 12px;float: left;margin-top: 6%;">{{userSelectTrend.likes}}</span>
				<view style="width:30px;float: left;margin-top: 6%;margin-left: 8%;" @click="commentShow=true">
					<u-icon name="chat" size="30" style="float: left;"></u-icon>
				</view>
				<span style="color: #B4B2B5;font-size: 12px;float: left;margin-top: 6%;">{{chats}}</span>
			</view>
		</view>
		<!-- 评论 -->
		<u-popup :show="commentShow" mode="bottom"  @close="close" @click="commentShow=true" :round="10" closeable="true">
			<p style="font-weight: bold;font-size: 18px;margin-left: 40%;margin-top:10px">评论（{{chats}}）</p>
			<view style="width: 100%;height:580px;position: relative;flex: auto;overflow: auto;">
				<view  style="width: 100%;height:550px;position: relative;flex: auto;overflow: auto;">
					<view v-if="trendCommentList.length==0">
						<p style="font-size: 14px;font-weight: bold;margin-top: 30%;margin-left: 36%;">还没有人评论哦</p>
						<p style="font-size: 12px;margin-top: 4%;color: #969696;margin-left:26%;">快成为第一个坐沙发的小可爱吧</p>
					</view>
					<view class="TrendDetails_comment" v-for="item in trendCommentList" :key="item.id">
						<img :src='item.avatarUrl' style="width: 40px;height: 40px;border-radius: 100%;margin-top: 2%;float: left;">
						<p style="margin-left: 2%;font-size: 14px;color: #969696;margin-top: 2%;float: left;width:70%;">{{item.userName}}<span v-if="userSelectTrend.userId==userId" style="width: 20px;font-size: 14px;background-color: #EFEFEF;color:#B8B8B8;margin-left: 4%;">作者</span></p>
						<p style="margin-left: 2%;font-size: 14px;margin-top: 2%;float: left;width:70%;">{{item.content}}</p>
						<view style="width: 10%;height: 50px;float: left;">
							<view style="width:30px;float: left;">
								<u-icon  @click="thumbsCommentUpState(item)" v-if="item.thumbFlag==0"  name="heart" style="float: left;" size="30"></u-icon>
								<u-icon  @click="noThumbsCommentUpState(item)" v-if="item.thumbFlag==1"  name="heart-fill" style="float: left;" size="30"></u-icon>
							</view>
							<p style="color: #B4B2B5;font-size:16px;float: left;margin-left:10px;">{{item.likes}}</p>
						</view>
						<p  style="margin-left:12%;font-size: 14px;color: #969696;float: left;width: 70%;">{{item.createTime|formatDate('yyyy-MM-dd')}}<span style="color:black;margin-left: 6%;" @click="reply(item)">回复</span><span v-if="item.userId==userId" style="color:black;margin-left: 6%;"  @click="deleteTrendById(item)">删除</span></p>
						<p  v-if="item.childs.length!=0 && bb!==item.id" style="margin-left:12%;font-size: 14px;color: royalblue;margin-top: 2%;float: left;width: 70%;" @click="aa(item.id)"> 展开下面{{item.childs.length}}条评论▽</p>
						
						<view v-if="bb==item.id" style="width: 90%;height: 100px;margin-left: 10%;float: left;margin-top:4%;" v-for="it in item.childs" :key="it.id">
							<img :src='it.avatarUrl' style="width: 30px;height: 30px;border-radius: 100%;margin-top: 2%;float: left;">
							<p style="margin-left: 2%;font-size: 14px;color: #969696;margin-top: 2%;float: left;width:70%;">{{it.userName}}<span v-if="it.userId==userId" style="width: 20px;font-size: 14px;background-color: #EFEFEF;color:#B8B8B8;margin-left: 4%;">作者</span></p>
							<p v-if="it.replyName==''" style="margin-left: 2%;font-size: 14px;margin-top: 2%;float: left;width:70%;">{{it.content}}</p>
							<p v-if="it.replyName!==''" style="margin-left: 2%;font-size: 14px;margin-top: 2%;float: left;width:70%;">回复@{{it.replyName}}  {{it.content}}</p>
							<view style="width: 10%;height: 50px;float: left;">
								<view style="width:30px;float: left;">
									<u-icon  @click="thumbsCommentUpState(it)" v-if="it.thumbFlag==0"  name="heart" style="float: left;" size="30"></u-icon>
									<u-icon  @click="noThumbsCommentUpState(it)" v-if="it.thumbFlag==1"  name="heart-fill" style="float: left;" size="30"></u-icon>
								</view>
								<span style="color: #B4B2B5;font-size: 12px;float: left;margin-left:10px;">{{it.likes}}</span>
							</view>
							<p  style="margin-left:10%;font-size: 14px;color: #969696;margin-top: 2%;float: left;width: 70%;">{{it.createTime|formatDate('yyyy-MM-dd')}}<span style="color:black;margin-left: 6%;" @click="reply(it)">回复</span><span v-if="it.userId==userId"  @click="deleteSecondTrendById(it)"style="color:black;margin-left: 6%;">删除</span></p>
						</view>
					</view>
				</view>
				
				<view style="position: fixed;bottom: 0;left: 2%;height: 30px;width: 96%;border-radius: 12px;background-color: #F2F2F2;">
					   <input  style="float: left;" v-model="content" class="weui-input" :placeholder="title" />
					   <button class="mini-btn" size="mini" style="width: 24%;float: left;margin-left: 22%;" @click="send">发送</button>
				</view>
				
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 存放登录成功后的结果
				user:'',
				// 存放登录成功后的用户id
				userId:'',
				// 存放登录成功后的用户昵称
				nickName:'',
				// 存放登录成功后的图片路径和id
				avatarUrl:'',
				// 存放用户选择的动态id
				trendId:'',
				// 存放查询动态内容结果
				userSelectTrend:'',
				// 评论弹出层默认false
				commentShow:false,
				bb:0,
				title:'展开说说吧...',
				// 回复赋值的父级评论id
				parentId:0,
				// 输入框的值
				content:'',
				// 存放查询动态评论的结果
				trendCommentList:'',
				// 存放评论数量
				chats:0,
				// 存放轮播图图片个数
				pictureLength:0
			}
		},
		methods:{
			
			aa(id){
				
				this.bb = id
			},
			// 初始化查询动态的评论
			getUserTrend(){
				this.chats = 0
				this.$myRequest({
					url:'/trends/getUserTrend',
					data:{
						userId:this.userId,
						trendId:this.trendId
					}
				}).then(res=>{
					this.trendCommentList = res.data.data
					console.log(this.trendCommentList)
					if(this.trendCommentList.length == 0){
						this.chats = 0
					}
					else{
						this.trendCommentList.forEach(item=>{
							if(item.childs.length!==0){
								this.chats += item.childs.length
							}
							
						})
						this.chats += this.trendCommentList.length
					}
				})
			},
			//初始化查询用户选择的动态内容信息
			getUserSelectTrend(){
				this.$myRequest({
					url:'/trends/getUserSelectTrend',
					data:{
						id:this.trendId,
						userId:this.userId
					}
				}).then(res=>{
					this.userSelectTrend = res.data.data
					if(this.userSelectTrend.pictureGroup!='')
						this.userSelectTrend.pictureGroup  = this.userSelectTrend.pictureGroup.split(',')
					this.pictureLength = this.userSelectTrend.pictureGroup.length
				})
			},
			// 动态内容点赞
			ThumbsUpState(userSelectTrend){
				this.$myRequest({
					url:'/trends/thumbsUpState',
					data:{
						userId:this.userId,
						trendId:userSelectTrend.id
					},
					method:"POST",
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserSelectTrend()
				})
			},
			// 取消动态内容点赞
			noThumbsUpState(userSelectTrend){
				this.$myRequest({
					url:'/trends/noThumbsUpState',
					method: 'delete',
					data: {
						userId:this.userId,
						trendId:userSelectTrend.id
					},
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '取消点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserSelectTrend()
				})
			},
			//点赞动态评论
			thumbsCommentUpState(item){
				this.$myRequest({
					url:"/trends/thumbsCommentUpState",
					data:{
						userId:this.userId,
						tcId:item.id
					},
					method:"POST",
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '点赞评论成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新评论
					this.getUserTrend()
				})
			},
			// 取消评论点赞
			noThumbsCommentUpState(item){
				this.$myRequest({
					url:'/trends/noThumbsCommentUpState',
					method: 'delete',
					data: {
						userId:this.userId,
						tcId:item.id
					},
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '取消评论点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新评论
					this.getUserTrend()
				})
			},
			// 删除一级评论
			deleteTrendById(item){
				this.$myRequest({
					url:'/trends/deleteTrendById',
					data: JSON.stringify(item.id),
					method: 'delete'
				}).then(res=>{
					if(res.data.code == 200){
						uni.showToast({
							title: '删除评论成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 刷新评论
						this.getUserTrend()
					}
				})
			
			},
			
			// 删除二级评论
			deleteSecondTrendById(it){
				this.$myRequest({
					url:'/trends/deleteTrendById',
					data: JSON.stringify(it.id),
					method: 'delete'
				}).then(res=>{
					if(res.data.code == 200){
						uni.showToast({
							title: '删除评论成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 刷新评论
						this.getUserTrend()
					}
				})
			},
			//发送
			send(){
				if(this.parentId==0){
					this.$myRequest({
						url:'/trends/saveFirstTrend',
						data:{
							userId:this.userId,
							avatarUrl:this.avatarUrl,
							userName:this.nickName,
							content:this.content,
							parentId:this.parentId,
							trendId:this.trendId
						},
						method:"POST",
						dataType:'json'
					}).then(res=>{
						uni.showToast({
							title: '发布成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						//清空赋值
						this.replyContent = ''
						this.replyId = ''
						this.replyName = ''
						this.parentId = 0
						this.title = ''
						this.content = ''
						// 初始化查询动态的评论
						this.getUserTrend()

					})
				}
				else{
					this.$myRequest({
						url:'/trends/saveSecondTrend',
						data:{
							userId:this.userId,
							userName:this.nickName,
							avatarUrl:this.avatarUrl,
							content:this.content,
							parentId:this.parentId,
							replyId:this.replyId,
							replyName:this.replyName,
							replyContent:this.replyContent,
							trendId:this.trendId
						},
						method:"POST",
						dataType:'json'
					}).then(res=>{
						uni.showToast({
							title: '发布成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						//清空赋值
						this.replyContent = ''
						this.replyId = ''
						this.replyName = ''
						this.parentId = 0
						this.title = ''
						this.content = ''
						// 刷新评论
						this.getUserTrend()
					})
				}
			},
			// 关闭评论弹窗
			close() {
				this.commentShow = false
				// console.log('close');
			},
			// 点击回复时
			reply(item){
				if(item.parentId==0){
					this.replyContent =''
					this.replyId = ''
					this.replyName =''
					this.parentId = item.id
					this.title = '回复：'+item.userName
				}
				else{
					this.replyContent = item.content
					this.replyId = item.id
					this.replyName = item.userName
					this.parentId = item.parentId
					this.title = '回复：'+item.userName
				}
				
			}
		},
		onLoad:function(option){
			this.trendId = option.id
			this.user = wx.getStorageSync("user")
			this.userId = this.user.id
			this.nickName = this.user.nickName
			this.avatarUrl = this.user.avatarUrl
			// 初始化查询用户选择的动态内容信息
			this.getUserSelectTrend()
			// 初始化查询动态的评论
			this.getUserTrend()
		},
		//格式化时间
		filters:{
			formatDate: function(value,args) {
				var dt = new Date(value);
				if(args == 'yyyy-M-d') {// yyyy-M-d
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				return `${year}-${month}-${date}`;
			} else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				let hour = dt.getHours();
				let minute = dt.getMinutes();
				let second = dt.getSeconds();
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			} else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2,'0');
				let date = dt.getDate().toString().padStart(2,'0');
				return `${year}-${month}-${date}`;
			} else {// yyyy-MM-dd HH:mm:ss
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2,'0');
				let date = dt.getDate().toString().padStart(2,'0');
				let hour = dt.getHours().toString().padStart(2,'0');
				let minute = dt.getMinutes().toString().padStart(2,'0');
				let second = dt.getSeconds().toString().padStart(2,'0');
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			}
			},
			
		},
	}
</script>

<style lang="scss">
	
	 .indicator {
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 0 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
	                 background-color: #ffffff;
	             }
	        }
	    }
	
	    .indicator-num {
	        padding: 2px 0;
	        background-color: rgba(0, 0, 0, 0.35);
	        border-radius: 100px;
	        width: 35px;
	        @include flex;
	        justify-content: center;
	
	        &__text {
	             color: #FFFFFF;
	             font-size: 12px;
	         }
	    }
	
	
	.TrendDetails{
		width: 100%;
		height: 870px;
	}
	swiper {
	  width: 100%;
	  height: calc(100vw * 327 /  491);
	}
	image {
	  width: 100%;
	}
	video {
	  width: 100%;
	}
	.TrendDetails_head{
		margin-top: 10px;
		width: 36%;
		height: 50px;
		margin-bottom: 3%;
	}
	.TrendDetails_body{
		width: 96%;
		height: 300px;
		margin-left: 2%;
	}
	.TrendDetails_icon{
		width: 40%;
		height: 40px;
		margin-left: 56%;
		margin-top: 6%;
	}
	.TrendDetails_comment{
		width: 96%;
		margin-left: 2%;
		margin-top: 8%;
		height: 120px;
		display:table;
	}
</style>